<template>
	<view class="person">
		<view class="person-top">
			<image class="avatar" :src="avatar" mode="widthFix"></image>
			<view class="info">
				<view class="name">不爱吃洋葱</view>
				<view class="code">邀请码：45489</view>
			</view>
		</view>
		<view style="margin: 0 30rpx;">
			<view class="al-card">
				<view class="top">
					<text class="left">我的收益</text>
					<text class="right">去提现 <uni-icons type="right" size="16"></uni-icons></text>
				</view>
				<view class="shouyi">
					<view class="item">
						<view>余额（元）</view>
						<view class="num">2549.57</view>
					</view>
					<view class="item">
						<view class="text">今日收益（元）</view>
						<view class="num" style="color: red;">324.48</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 宫格导航 -->
		<view class="al-box" style="margin: 30rpx;">
			<uni-grid :column="4" @change="change" :showBorder="false"  :square="false">
				<uni-grid-item v-for="(item,index) in navsGrid" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="30"></uni-icons>
						<text class="text">{{item.name}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 更多服务 -->
		<view class="al-box" style="margin: 30rpx;">
			<view class="more-top">
				更多服务
			</view>
			<uni-grid :column="5" @change="change" :showBorder="false"  :square="false">
				<uni-grid-item v-for="(item,index) in moreNavs" :key="index">
					<view class="grid-item-box" style="margin: 0 20rpx;font-size: 24rpx;">
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="30"></uni-icons>
						<text class="text">{{item.name}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: 'https://img0.baidu.com/it/u=2171139748,2906953338&fm=26&fmt=auto&gp=0.jpg',
				navsGrid:[
					{name:'我的收益',icon:'icon-tixian'},
					{name:'我的收藏',icon:'icon-shoucangshangpin'},
					{name:'我的订单',icon:'icon-dingdanchaxun'},
					{name:'我的团队',icon:'icon-tuandui'},
				],
				moreNavs:[
					{name:'新手引导',icon:'icon-changyongqingdan'},
					{name:'我的足迹',icon:'icon-zuji2'},
					{name:'帮助中心',icon:'icon-bangzhuzhongxin'},
					{name:'官方客服',icon:'icon-kefu1'},
					{name:'下载APP',icon:'icon-xiazai1'},
					{name:'意见反馈',icon:'icon-yijianfankui'},
				],
			}
		},
		methods: {
			change(e){
				let {index} =e.detail
				console.log('点击了宫格'+index)
			}
		}
	}
</script>

<style lang="scss">
	.person {
		// padding: 30rpx;
	}

	.person-top {
		background-color: #007AFF;
		padding: 30rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		margin-bottom: 30rpx;

		.info {
			margin-left: 20rpx;

			.name {
				font-weight: 600;
			}

			.code {
				color: #fff;
				font-size: 24rpx;
				background-color: #2c64a2;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				margin-top: 10rpx;
			}
		}
	}

	.avatar {
		border-radius: 50%;
		width: 160rpx;
	}

	.shouyi {
		display: flex;
		margin-top: 36rpx;

		.item {
			flex: 50%;
			font-size: 24rpx;
			color: #8a8a8a;

			.num {
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 15rpx;
			}
		}
	}
	.grid-item-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #666;
		.text{
			margin-top: 10rpx;
		}
	}
	.more-top{
		padding: 24rpx;
		font-size: 28rpx;
		font-weight: 700;
		border-bottom: 1px solid #ddd;
	}
</style>
